import React from "react";
import { useNavigate } from "react-router-dom";
import { propsinterface } from "../essay";
import homepagemod from "./index.module.less";

type modprops = {
  labels?: { id: number; content: string }[];
  typeessay?: propsinterface[];
  title: string;
  type?: 0 | 1;
};
export default function Mod(props: modprops) {
  const { title, labels, typeessay, type } = props;
  const navigate = useNavigate();
  return (
    <div className={homepagemod.homepagemod}>
      <div className="title">{title}</div>
      <div className="content">
        <ul>
          {labels &&
            labels.map((item) => {
              return (
                <li key={item.id} className="onelabel">
                  <span className="iconfont icon-biaoqian_o"></span>{" "}
                  {item.content}
                </li>
              );
            })}
          {typeessay &&
            typeessay.map((item) => {
              return (
                <li
                  className="oneessay"
                  key={item.id}
                  onClick={(e) => {
                    navigate(`/essaydetail/${item.id}`);
                  }}
                >
                  <div className={type === 1 ? "left hot" : "left"}>
                    <div>views</div>
                    <div>{item.views}</div>
                  </div>
                  <div className="right">
                    <div>{item.title}</div>
                    <div>{item.content}</div>
                  </div>
                </li>
              );
            })}
        </ul>
      </div>
    </div>
  );
}
